<template>
  <n-card class="cardbg" content-style="padding:0.75rem;">
    <template v-if="$cfg.function.ckqx('idc') == true">
      <!-- 攻略作者 -->
      <n-space align="center">
        <n-button
          @click="val.xtype = null"
          :type="val.xtype == null ? 'warning' : 'default'"
          >○ 选择目录</n-button
        >
        <n-button
          @click="val.xtype = 'new'"
          :type="val.xtype == 'new' ? 'warning' : 'default'"
          >○ 填写目录</n-button
        >
      </n-space>
      <n-h3 class="h3title1">所属目录：</n-h3>
      <div v-if="val.xtype == null">
        <n-select :options="val.list" v-model:value="val.data.n_dir" />
      </div>
      <div v-if="val.xtype == 'new'">
        <n-input placeholder="获取中..." v-model:value="val.data.n_dir"></n-input>
      </div>

      <n-h3 class="h3title1">攻略名称：</n-h3>
      <n-input placeholder="获取中..." v-model:value="val.data.n_name"></n-input>
      <n-h3 class="h3title1">作者名称：</n-h3>
      <n-input placeholder="获取中..." v-model:value="val.data.by"></n-input>
      <n-h3 class="h3title1">排序：(数字越大越靠前)</n-h3>
      <n-input placeholder="获取中..." v-model:value="val.data.px"></n-input>
      <n-hr />
      <!-- 上传图片 -->
      <n-h3 class="h3title1">上传新图片：</n-h3>
      <n-upload
        ref="upload"
        :action="`${$cfg.url}?t=v2/introduction/gtidc&type=img&ot=gt&type2=upd_idc&authkey=${$cfg?.user?.authkey}`"
        accept="image/png, image/jpeg, image/webp"
        :default-upload="false"
        list-type="image-card"
        :data="val.data"
        @before-upload="val.upd"
        @remove="val.remove"
        @finish="val.fin"
        :max="1"
      >
        点击上传
      </n-upload>
      <br />
      <n-button @click="val.upd_idc(val.data)">提交数据</n-button>
    </template>
    <template v-else>
      没有权限编辑，请使用相关用户组账号编辑。
      <n-hr />{{ $cfg.function.qxlang("idc") }}
    </template>
  </n-card>
</template>

<script>
import { cfg } from "@/cfg/cfg.js";

export default {
  props: {
    val: {
      required: true,
    },
    ct: {
      required: true,
    },
  },
  setup(props) {
    let data = props.val;
    let ct = props.ct;
    const uploadRef = ref(null);
    let val = reactive({
      data: { ...data["clickdata"] },
      list: [],
      updzt: false,
      //点击删除图片
      remove: async (data) => {
        try {
          val.updzt = false;
        } catch (error) {
          cfg.function.error(error);
        }
      },
      //点击提交
      upd_idc: async (data2) => {
        try {
          //如果无图片使用普通get 有图片使用提交表单
          if (val.updzt == false) {
            const res = await cfg.axios.get(`${cfg.url}`, {
              params: {
                t: "v2/introduction/gtidc",
                type: "img",
                type2: "upd_idc",
                ot: "gt",
                data: val.data,
                authkey: cfg.user.authkey,
              },
            });
            if (res.data.code == -1) {
              alert(`发生错误 ${res.data.msg}`);
              return;
            }
            const axdata = await ct.get_img_idc();
            data.list = axdata.data;
            await data.getidc(val.data.n_dir, "upd", val.data);
            cfg.msg.success(`编辑成功`, { duration: 2e3 });
            cfg.msg.success(`编辑成功`, { duration: 2e3 });
            cfg.msg.success(`编辑成功`, { duration: 2e3 });
            data.md_edit_data = false;
          } else {
            uploadRef.value?.submit();
          }
          return;
        } catch (error) {
          cfg.function.error(error);
        }
      },

      upd: async (file) => {
        val.updzt = true;
        if (val.data.n_dir == null || val.data.n_dir?.length < 1) {
          cfg.msg.error("请填写或选择攻略目录");
          return false;
        }
        if (val.data.n_name == null || val.data.n_name?.length < 1) {
          cfg.msg.error("请填写攻略名称");
          return false;
        }
        if (val.data.by == null || val.data.by?.length < 1) {
          cfg.msg.error("请填写作者名称");
          return false;
        }
        if (
          file.file.file?.type === "image/png" ||
          file.file.file?.type === "image/jpeg" ||
          file.file.file?.type === "image/webp"
        ) {
          return true;
        } else {
          cfg.msg.error("只能上传jpg,web,png格式的图片文件，请重新上传");
          return false;
        }
      },
      fin: ({ file, event }) => {
        try {
          const back = event.target;
          const json = JSON.parse(back.responseText);
          cfg.msg.success(`编辑成功`, { duration: 2e3 });
          cfg.msg.success(`编辑成功`, { duration: 2e3 });
          cfg.msg.success(`编辑成功`, { duration: 2e3 });
          data.md_edit_data = false;
          return file;
        } catch (error) {
          alert(error);
          return false;
        }
      },
    });
    //转换id为字符串
    if (typeof val.data["_id"] == "object") {
      val.data["_id"] = val.data["_id"]["$oid"];
    }

    onMounted(async () => {
      const axdata = await props.ct.get_img_idc();
      val.list = [];
      axdata?.data?.forEach((item) => {
        val.list.push({
          value: item,
          label: item,
        });
      });
    });

    return {
      uploadRef,
      upload: uploadRef,
      data,
      ct,
      val,
    };
  },
};
</script>
